<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="import" href="../bottom.js" id="bottom" />
  <style type="text/css">
    @import url(./header.css);
    @import url(./second-head.css);
    @import url(../bottom.css);
    @import url(./position.css);

    .middleDiv {
      height: 800px;
      width: 100%;
      position: relative;
      background: url(../img/serveCenter/serveComsumer/serveComsumer-bg.png) no-repeat;
      background-size: 100% auto;

      /*图片在底部显示*/
      background-position-y: bottom;
    }

    .middleDiv .titleDiv {
      position: absolute;
      width: 46%;
      height: 40px;
      /* background-color: blue; */
      margin-left: 27%;
      top: 10%;
      text-align: center;
      display: flex;
    }

    .middleDiv .titleDiv .title {
      width: 40%;
      height: 100%;
      /* border-bottom: 1px solid blue; */
    }

    .logo {
      position: absolute;
      left: 25%;
      top: 9%;
    }

    .contactDiv-back {
      position: absolute;
      left: 5%;
      top: 25%;
      width: 90%;
      height: 400px;
      border-radius: 15px;
      border: 1px solid grey;
    }

    .contactDiv-front {
      position: absolute;
      height: 360px;
      width: 100%;
      margin-top: 20px;
      border-radius: 15px;
      border: 1px solid grey;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
    }

    .contactDiv-front .item {
      margin-top: 80px;
      margin-bottom: 15px;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: -webkit-linear-gradient(left, #3AAFF1, #0D85DC);

    }


    .ErWeiMa-div {
      position: relative;
      top: 75%;
      width: 100%;
      height: 180px;
      /* border: 1px solid black; */
      display: flex;
    }

    .ErWeiMa-div .ErWeiMa {
      /* border: 1px solid black; */
      position: absolute;
      width: auto;
      height: auto;
      top: 20%;
      left: 12%;
    }

    .ErWeiMa-div .firstFont {
      position: absolute;
      font-size: 16px;
      line-height: 26px;
      color: #333;
      left: 20%;
      padding-top: 45px;
      width: 194px;
      height: 33px;
    }

    .ErWeiMa-div .secondFont {
      position: absolute;
      font-size: 16px;
      line-height: 26px;
      color: #333;
      width: auto;
      height: auto;

      right: 12%;
      padding-top: 45px;
      text-align: right;
    }
  </style>
</head>

<body>
  <div>
    <script src="./header.js"></script>
  </div>

  <div class="positionFont">
    <span><a href="#">首页</a> > <a href="./serveConcept.html">服务中心</a> > 服务消费者</span>
  </div>

  <div>
    <img style="width: 100%;" src="../img/serveCenter/publicImg1.jpg" />

    <div class="second-head">
      <div class="second-head-div">
        <div>
          <a href="./serveConcept.html">服务理念</a>
          <div class="border-div"></div>
        </div>
        <div>
          <a href="#" style="color: blue;">服务消费者</a>
          <div class="border-div" style="width: 100%;"></div>
        </div>
        <div>
          <a href="./serveParnter.html">服务合作伙伴</a>
          <div class="border-div"></div>
        </div>
        <div>
          <a href="./productC&A.html">产品Q&A</a>
          <div class="border-div"></div>
        </div>
        <div>
          <a href="./ProductEnterpriseStandard.html">产品企业标准</a>
          <div class="border-div"></div>
        </div>
        <div>
          <a href="./want-EattingSafe.htm">旺话食安</a>
          <div class="border-div"></div>
        </div>
        <div>
          <a href="#">廉洁旺旺</a>
          <div class="border-div"></div>
        </div>
      </div>
    </div>

    <div class="middleDiv">
      <img class="logo" src="../img/serveCenter/serveComsumer/logo.png">

      <div class="titleDiv">
        <div class="title" style="border-bottom: 1px solid #008CD6;color: #008CD6;">服务信息</div>
        <div class="title" style="border-bottom: 1px solid #808080;color: #808080;">呼叫中心简介</div>
        <div class="title" style="border-bottom: 1px solid #808080;color: #808080;">反馈信息受理</div>
      </div>

      <div class="contactDiv-back">
        <div class="contactDiv-front">
          <div style="width:33%">
            <div class="item"></div>
            <span>
              产品服务热线<br><br>400 821 1151
            </span>
          </div>

          <div style="width:33%">
            <div class="item"></div>
            <span>
              电子邮箱<br><br>Service@want-want.com
            </span>
          </div>

          <div style="width:33%">
            <div class="item"></div>
            <span>
              邮寄地址<br><br>上海市闵行区红松东路1088号
            </span>
          </div>





        </div>
        <!-- <div class="font-Div"></div> -->
      </div>

      <div class="ErWeiMa-div">
        <div class="ErWeiMa">
          <img src="../img/serveCenter/serveComsumer/ErWeiMa.jpg">
        </div>
        <div class="firstFont">
          关注旺仔俱乐部微信公众号
          联系在线客服
        </div>
        <div class="secondFont">
          <span>人工服务时间：周一至周五<br></span>
          <span>(08:30 - 12:00 ； 13:00 - 17:30 ，节假日除外)</span>
        </div>
      </div>
    </div>

    <script src="../bottom.js"></script>
  </div>
</body>

</html>